import React, { Fragment, useEffect, useState } from 'react';
import s from './index.less';
import 'swiper/swiper-bundle.css';
import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { Navigation } from 'swiper';

SwiperCore.use([Navigation]);

type PrimaryPros = {
  currentTab: string
}


const Primary: React.FC<PrimaryPros> = (props) => {
  const { currentTab } = props;
  const [levelName, setLeverName] = useState<string>('初级');

  useEffect(() => {
    currentTab === 'primary' ? setLeverName('初级') : currentTab === 'middle' ? setLeverName('中级') : setLeverName('高级');
  }, [currentTab]);


  const onSetTransition = (swiper: any, transition: any) => {
    for (let i = 0; i < swiper.slides.length; i++) {
      let slide = swiper.slides.eq(i);
      slide.transition(transition);
    }
  };

  const onProgress = (swiper: any, progress: any) => {
    for (let i = 0; i < swiper.slides.length; i++) {
      let slide = swiper.slides.eq(i);
      let slideProgress = swiper.slides[i].progress;
      let modify = 1;
      if (Math.abs(slideProgress) > 1) {
        modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
      }
      let translate = slideProgress * modify * 53 + 'px';
      let scale = 1 - Math.abs(slideProgress) / 5;
      let zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
      slide.transform('translateX(' + translate + ') scale(' + scale + ')');
      slide.css('zIndex', zIndex);
      slide.css('opacity', 1);
      if (Math.abs(slideProgress) > 2) {
        slide.css('opacity', 0);
      }
    }
  };
  return (
    <Fragment>
      <section className={s.block_primary}>

        <section className={s.card_content}>
          <img src={require('@/static/card-title.png')} className={s.block_card_title} alt='' />

          <section className={s.ball}>

          </section>

          <section className={s.card_info}>
            <p>赠送【神秘魔法牌】</p>
            <p>集满9张可兑换188888的稀有礼物【仙境奇遇】</p>
          </section>
        </section>

        <section className={s.gifts_content}>
          <img src={require('@/static/gifts-title.png')} className={s.block_gifts_title} alt='' />
          <div id='certify'>
            <div className='swiper-container'>
              <Swiper
                className='swiper-wrapper'
                loop={true} //循环切换
                watchSlidesProgress={true}  //Progress（进度、进程）分为swiper的progress 和每个slide单独的progress。
                loopedSlides={5} //可视slide有3个，loopedSlides可设为5个或以上
                slidesPerView={'auto'}
                navigation={{
                  nextEl: '.swiper-button-next',
                  prevEl: '.swiper-button-prev',
                }}
                initialSlide={1}
                centeredSlides={true} //设定为true时，active slide会居中，而不是默认状态下的居左。
                onProgress={onProgress} //回调函数，当Swiper的progress被改变时执行。接受swiper实例和此Swiper的progress作为参数（返回值范围一般在0-1）。
                onSetTransition={onSetTransition} //回调函数，每当设置Swiper开始过渡动画时执行。transtion获取到的是Swiper的speed值。
              >
                <SwiperSlide className='swiper-slide'>
                  <img src={require('@/static/gifts-title.png')} className={s.block_card_title} alt='' />
                </SwiperSlide>
                <SwiperSlide className='swiper-slide'>
                  <img src={require('@/static/gifts-title.png')} className={s.block_card_title} alt='' />
                </SwiperSlide>
                <SwiperSlide className='swiper-slide'>
                  <img src={require('@/static/gifts-title.png')} className={s.block_card_title} alt='' />
                </SwiperSlide>
                <SwiperSlide className='swiper-slide'>
                  <img src={require('@/static/gifts-title.png')} className={s.block_card_title} alt='' />
                </SwiperSlide>
                <SwiperSlide className='swiper-slide'>
                  <img src={require('@/static/gifts-title.png')} className={s.block_card_title} alt='' />
                </SwiperSlide>

              </Swiper>
            </div>
          </div>
          <section className='swiper-button-next' />
          <section className='swiper-button-prev' />
          <p className={s.gifts_info}>已收集初级礼物数量：1/9</p>

        </section>
      </section>
      <section className={s.block_bottom}>
        <p className={s.bottom_title}>游戏规则：</p>
        <section className={s.rule}>
          <p>1、魔法牌即送即开，从魔法牌中抽到的礼物会立即送给对应收礼者。
          </p>
          <p>2、从魔法牌中抽到的礼物，收礼者可以正常获得相应价值的收益，用户正常增加相应价值的经验。</p>
          <p>3、魔法牌本身不增加经验和收益。
          </p>
          <p>4、魔法牌支持批量赠送或同时给多人赠送，但只会展示价值最高的礼物特效，其余礼物特效不依次展示，可在公屏消息查看详情或再本页面的【召唤记录】中进行查询。</p>
          <p>5、礼物列表及获取概率（{levelName}）：</p>
          <table>
            <thead>
            <tr>
              <th colSpan={3} className={s.special}>
                {levelName}
              </th>
            </tr>
            </thead>

            <tbody>
            {
              new Array(11).fill(1).map((item, index) => {
                return (
                  <tr key={index}>
                    <td>名称</td>
                    <td>价格</td>
                    <td>概率</td>
                  </tr>
                );
              })
            }
            </tbody>
          </table>
          <p>6、该玩法仅供娱乐，严禁用户通过该玩法反向兑现现金或有价值的商品，线下交易等第三方不正当行为，平台将对各类以盈利，为目的不正当交易行为进行严厉打击，用户需自行承担与任何第三方交易的不利后果。</p>
        </section>
      </section>
    </Fragment>
  );


};

export default Primary;
